<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>商品页面</title>
		<headershop th:replace="shopheader"></headershop>
		<link type="text/css" href="/shop/css/optstyle.css" rel="stylesheet" />
		<link type="text/css" href="/shop/css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="/shop/basic/js/quick_links.js"></script>
		<script type="text/javascript" src="/shop/js/jquery.imagezoom.min.js"></script>
		<script type="text/javascript" src="/shop/js/jquery.flexslider.js"></script>
		<script type="text/javascript" src="/shop/js/list.js"></script>
	</head>

	<body>
		<input type="hidden" id="goodId" th:value="${goods.id}"/>
		<tps th:replace="top-nav-search"></tps>
		<div style="padding-top:10px; padding-bottom:5px;margin:0px 40px 10px 0px;">
			<navtable th:replace="nav-table"></navtable>
			<b class="line"></b>
		</div>

		<div class="listMain">
			<ol class="am-breadcrumb am-breadcrumb-slash">
				<li><a href="#">首页</a></li>
				<li><a href="#">分类</a></li>
				<li class="am-active">内容</li>
			</ol>
			<script type="text/javascript">
				$(function() {});
				$(window).load(function() {
					$('.flexslider').flexslider({
						animation: "slide",
						start: function(slider) {
							$('body').removeClass('loading');
						}
					});
				});
			</script>
			<div class="scoll">
				<section class="slider">
					<div class="flexslider">
						<ul class="slides">
							<li>
								<img src="/shop/images/01.jpg" title="pic" />
							</li>
							<li>
								<img src="/shop/images/02.jpg" />
							</li>
							<li>
								<img src="/shop/images/03.jpg" />
							</li>
						</ul>
					</div>
				</section>
			</div>

			<!--放大镜-->

			<div class="item-inform">
				<div class="clearfixLeft" id="clearcontent">

					<div class="box">
						<script type="text/javascript">
							$(document).ready(function() {
								$(".jqzoom").imagezoom();
								$("#thumblist li a").click(function() {
									$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
									$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
									$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
								});
							});
						</script>

						<div class="tb-booth tb-pic tb-s310">
							<a href="/shop/images/01.jpg"><img src="/shop/images/01_mid.jpg" alt="细节展示放大镜特效" rel="/shop/images/01.jpg" class="jqzoom" /></a>
						</div>
						<ul class="tb-thumb" id="thumblist">
							<li class="tb-selected">
								<div class="tb-pic tb-s40">
									<a href="#"><img src="/shop/images/01_small.jpg" mid="/shop/images/01_mid.jpg" big="/shop/images/01.jpg"></a>
								</div>
							</li>
							<li>
								<div class="tb-pic tb-s40">
									<a href="#"><img src="/shop/images/02_small.jpg" mid="/shop/images/02_mid.jpg" big="/shop/images/02.jpg"></a>
								</div>
							</li>
							<li>
								<div class="tb-pic tb-s40">
									<a href="#"><img src="/shop/images/03_small.jpg" mid="/shop/images/03_mid.jpg" big="/shop/images/03.jpg"></a>
								</div>
							</li>
						</ul>
					</div>

					<div class="clear"></div>
				</div>

				<div class="clearfixRight">
					<!--规格属性-->
					<!--名称-->
					<div class="tb-detail-hd">
						<h1 th:text="${goods.name}"></h1>
					</div>
					<div class="tb-detail-list">
						<!--价格-->
						<div class="tb-detail-price">
							<li class="price iteminfo_price">
								<dt>促销价</dt>
								<dd><em>¥</em><b class="sys_item_price" th:text="${goods.retail_price}"></b> </dd>
							</li>
							<li class="price iteminfo_mktprice">
								<dt>原价</dt>
								<dd><em>¥</em><b class="sys_item_mktprice" th:text="${goods.market_price}">98.00</b></dd>
							</li>
							<div class="clear"></div>
						</div>

						<!--地址-->
						<dl class="iteminfo_parameter freight">

							<dt>配送至</dt>
							<div class="iteminfo_freprice">
								<div class="am-form-content address">
									<select data-am-selected id="province" name="province">
											
										</select>
									<select data-am-selected id="city" name="city">
											
										</select>
									<select data-am-selected id="area" name="area">
											
										</select>
								</div>
								<div class="pay-logis">
									快递<b class="sys_item_freprice">10</b>元
								</div>
							</div>
						</dl>
						<script type="text/javascript">
							$.get("../shop/js/coutryaddress.json", function(data) {
								var city = data;

								function getcity(prv) {
									var t;
									$.each(city, function(i, ct) {
										var n = $("#province").find("option:selected").text();
										if (n == ct.name) {
											t = ct.city;
											return;
										}
									});
									return t;
								}

								function getarea(prv, ct) {
									var t = getcity(prv);
									var p;
									$.each(t, function(i, ar) {
										var m = $("#city").find("option:selected").text();
										if (ar.name == m) {
											p = ar.area;
											return;
										}
									})
									return p;
								}
								$.each(data, function(i, prv) {
									$("<option value='" + i + "' >" + prv.name + "</option>").appendTo("#province");
								});
								$("#province").change(function() {
									var prv = $(this).val();
									var ar = city[prv].city;
									$("#city").empty();
									$.each(ar, function(i, ct) {
										$("<option value='" + i + "'>" + ct.name + "</option>").appendTo("#city");
									});
									$("#city").trigger("change");
								})
								$("#province").trigger("change");
								$("#city").change(function() {
									var prv = $("#province").val();
									var ct = $(this).val();
									var ar = getarea(prv, ct);
									$("#area").empty();
									$.each(ar, function(i, ar) {
										$("<option value='" + i + "'>" + ar + "</option>").appendTo("#area");
									})
								})
								$("#city").trigger("change");
							})
						</script>
						<div class="clear"></div>
						<!--销量-->
						<ul class="tm-ind-panel">
							<li class="tm-ind-item tm-ind-sellCount canClick">
								<div class="tm-indcon"><span class="tm-label">月销量</span><span class="tm-count">1015</span></div>
							</li>
							<li class="tm-ind-item tm-ind-sumCount canClick">
								<div class="tm-indcon"><span class="tm-label">累计销量</span><span class="tm-count">6015</span></div>
							</li>
							<li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
								<div class="tm-indcon"><span class="tm-label">累计评价</span><span class="tm-count">640</span></div>
							</li>
						</ul>
						<div class="clear"></div>
						<!--各种规格-->
						<dl class="iteminfo_parameter sys_item_specpara">
							<dt class="theme-login"><div class="cart-title">可选规格<span class="am-icon-angle-right"></span></div></dt>
							<dd>
								<!--操作页面-->

								<div class="theme-popover-mask"></div>

								<div class="theme-popover">
									<div class="theme-span"></div>
									<div class="theme-poptit">
										<a href="javascript:;" title="关闭" class="close">×</a>
									</div>
									<div class="theme-popbod dform">
										<form class="theme-signin" name="loginform" action="" method="post">

											<div class="theme-signin-left">

												<div class="theme-options">
													<div class="cart-title">口味</div>
													<ul>
														<li class="sku-line selected">原味<i></i></li>
														<li class="sku-line">奶油<i></i></li>
														<li class="sku-line">炭烧<i></i></li>
														<li class="sku-line">咸香<i></i></li>
													</ul>
												</div>
												<div class="theme-options">
													<div class="cart-title">包装</div>
													<ul>
														<li class="sku-line selected">手袋单人份<i></i></li>
														<li class="sku-line">礼盒双人份<i></i></li>
														<li class="sku-line">全家福礼包<i></i></li>
													</ul>
												</div>
												<div class="theme-options">
													<div class="cart-title number">数量</div>
													<div>
														<input id="min" class="am-btn am-btn-default" name="" type="button" value="-" />
														<input id="text_box" name="" type="text" value="1" style="width:30px;" />
														<input id="add" class="am-btn am-btn-default" name="" type="button" value="+" />
														<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
													</div>

												</div>
												<div class="clear"></div>

												<div class="btn-op">
													<div class="btn am-btn am-btn-warning">确认</div>
													<div class="btn close am-btn am-btn-warning">取消</div>
												</div>
											</div>
											<div class="theme-signin-right">
												<div class="img-info">
													<img src="../shop/images/songzi.jpg" />
												</div>
												<div class="text-info">
													<span class="J_Price price-now">¥39.00</span>
													<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
												</div>
											</div>

										</form>
									</div>
								</div>
							</dd>
						</dl>
						<div class="clear"></div>
						<!--活动	-->
						<div class="shopPromotion gold">
							<div class="hot">
								<dt class="tb-metatit">店铺优惠</dt>
								<div class="gold-list">
									<p>购物满2件打8折，满3件7折<span>点击领券<i class="am-icon-sort-down"></i></span></p>
								</div>
							</div>
							<div class="clear"></div>
							<div class="coupon">
								<dt class="tb-metatit">优惠券</dt>
								<div class="gold-list">
									<ul>
										<li>125减5</li>
										<li>198减10</li>
										<li>298减20</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="pay">
						<div class="pay-opt">
							<a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
							<a><span class="am-icon-heart am-icon-fw">收藏</span></a>
						</div>
						<li>
							<div class="clearfix tb-btn tb-btn-buy theme-login">
								<a id="LikBuy" title="点此按钮到下一步确认购买信息" href="#">立即购买</a>
							</div>
						</li>
						<li>
							<div class="clearfix tb-btn tb-btn-basket theme-login">
								<a id="LikBasket" title="加入购物车" href="#"><i></i>加入购物车</a>
							</div>
						</li>
					</div>

				</div>
				<div class="clear"></div>
			</div>

			<!--优惠套装-->
			<div class="match">
				<div class="match-title">优惠套装</div>
				<div class="match-comment">
					<ul class="like_list">
						<li>
							<div class="s_picBox">
								<a class="s_pic" href="#"><img src="../shop/images/cp.jpg"></a>
							</div> <a class="txt" target="_blank" href="#">萨拉米 1+1小鸡腿</a>
							<div class="info-box"> <span class="info-box-price">¥ 29.90</span> <span class="info-original-price">￥ 199.00</span> </div>
						</li>
						<li class="plus_icon"><i>+</i></li>
						<li>
							<div class="s_picBox">
								<a class="s_pic" href="#"><img src="../shop/images/cp2.jpg"></a>
							</div> <a class="txt" target="_blank" href="#">ZEK 原味海苔</a>
							<div class="info-box"> <span class="info-box-price">¥ 8.90</span> <span class="info-original-price">￥ 299.00</span> </div>
						</li>
						<li class="plus_icon"><i>=</i></li>
						<li class="total_price">
							<p class="combo_price"><span class="c-title">套餐价:</span><span>￥35.00</span> </p>
							<p class="save_all">共省:<span>￥463.00</span></p> <a href="#" class="buy_now">立即购买</a> </li>
						<li class="plus_icon"><i class="am-icon-angle-right"></i></li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>

			<!-- introduce-->

			<div class="introduce">
				<div class="browse">
					<div class="mc">
						<ul>
							<div class="mt">
								<h2>看了又看</h2>
							</div>

							<li class="first">
								<div class="p-img">
									<a href="#"> <img class="" src="../shop/images/browse1.jpg"> </a>
								</div>
								<div class="p-name"><a href="#">
							      		【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
							      	</a>
								</div>
								<div class="p-price"><strong>￥35.90</strong></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="introduceMain">
					<div class="am-tabs" data-am-tabs="">
						<ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
							<li class="am-active">
								<a href="#">
									<span class="index-needs-dt-txt">宝贝详情</span></a>
							</li>
							<li>
								<a href="#">
									<span class="index-needs-dt-txt">全部评价</span></a>
							</li>
							<li>
								<a href="#">
									<span class="index-needs-dt-txt">猜你喜欢</span></a>
							</li>
						</ul>

						<div class="am-tabs-bd">
							<div class="am-tab-panel am-fade am-in am-active">
								<div class="J_Brand">
									<div class="attr-list-hd tm-clear">
										<h4>产品参数：</h4></div>
									<div class="clear"></div>
									<ul id="J_AttrUL">
										<li th:each=" attribute : ${attribute}" title="" th:text="${attribute.attribute_name+'：'+attribute.value}" ></li>
										
									</ul>
									<div class="clear"></div>
								</div>

								<div class="details">
									<div class="attr-list-hd after-market-hd">
										<h4>商品细节</h4>
									</div>
									<div class="twlistNews" th:utext="${goods.goods_desc}">
									</div>
								</div>
								<div class="clear"></div>

							</div>

							<div class="am-tab-panel am-fade">
								<ul class="am-comments-list am-comments-list-flip">
								
								</ul>

								<div class="clear"></div>

								<div class="clear"></div>

								<div class="tb-reviewsft" style="margin-top: 15px;">
									<div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="#" target="_blank">购物保障</a>，明确您的售后保障权益。</div>
								</div>

							</div>

							<div class="am-tab-panel am-fade">
								<div class="like">
									<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
										<li>
											<div class="i-pic limit">
												<img src="../shop/images/imgsearch1.jpg" />
												<p>【良品铺子_开口松子】零食坚果特产炒货
													<span>东北红松子奶油味</span></p>
												<p class="price fl">
													<b>¥</b>
													<strong>298.00</strong>
												</p>
											</div>
										</li>
									</ul>
								</div>
								<div class="clear"></div>

								<!--分页 -->
								<ul class="am-pagination am-pagination-right">
									<li class="am-disabled"><a href="#">&laquo;</a></li>
									<li class="am-active"><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li><a href="#">&raquo;</a></li>
								</ul>
								<div class="clear"></div>

							</div>

						</div>

					</div>

					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>

		<footer th:replace="footer"></footer>
		<tips th:replace="tips"></tips>
	</body>
	<script type="text/javascript">
		var goodsId=$("#goodId").val()
		$.get("/api/comment/list?valueId="+goodsId,function (data) {
			var da=data.data.data;
			$.each(da, function(i,o) {
				$("<li class='comment' style='margin-top: 15px;'>"
				+"<a href='#'>"
					+"<img class='am-comment-avatar' src='../shop/images/hwbn40x40.jpg' />"
				+"</a>"
				+"<div class='am-comment-main'>"
					+"<header class='am-comment-hd'>"
						+"<div class='am-comment-meta'>"
						+"<a href='#link-to-user' class='am-comment-author'>"+o.user_info.nickname+"</a>"
						+" 评论于<time datetime=''>"+o.add_time+"</time>"
						+"</div>"
					+"</header>"
					+"<div class='am-comment-bd'>"
						+"<div class='tb-rev-item'>"
							+"<div class='J_TbcRate_ReviewContent tb-tbcr-content'>"
								+o.content
							+"</div>"
							+"<div class='tb-r-act-bar' id='comment"+o.user_id+"'>"
								
							+"</div>"
						+"</div>"
					+"</div>"
				+"</div>"
				+"</li>").appendTo(".am-comments-list")
				$.get("/api/commentSpecifition/specifition?goodsId="+o.value_id+"&userId="+o.user_id,function (data) {
					var attribute=data[0].goods_specifition_name_value
					var attrbt=attribute.replace(/;/," &nbsp;&nbsp;")
					$("<div style='color: #6E6E6E;margin-top: 5px;'>规格：&nbsp;"+attrbt+"</div>").appendTo("#comment"+o.user_id)
				})
			});
		})
	</script>
</html>